In today's lecture we are going to finish up setting of setting up the shop basically.
So we've got a bit more about the guys to do for the shop.
Once I've done that, we're then going to get in or the items that we want for the shop to set up a
module script, which contains all the stats of all the items, and it also possibly set up the items
themselves.
We're using weld world constraints and things like that so that all working correctly.
So quite a bit to do in this lecture today.
So we've got up to here with the shop frame.
So I've got a nice bar here at the top saying item shop like that on this little button here.
Um we're going to add in another frame here.
Andress is going to be called, um, shop, not strawberry.
I'm sorry.
Um, items.
And in here, in here will be everything to do with the items that we're displaying.
So this frame is going to cover this section here.
Um.
So I'm just going to position it nicely there.
0.5.5 position.
In the center and smooth out a bit.
So eight zero.
And probably a bit larger.
Nine five possibly.
Don't want it all the way.
So there's a little border with this really would make would make it look the best.
Um and then vertically we're going to say.
0.6.
Have to move it down a bit, I believe.
Um.
MIT nine.
Um, positioning here along the Y.
Six.
6:04 a.m..
Oh.
That's a bit.
Let's change this so it's not.
There we go.
That seems to be okay.
So all our items and stuff will be displaying quite nicely in here.
Okay, um, it just makes designing the.
I think I explained this a bit last lecture as well, but it just makes designing the GUIs a bit easier
if you include lots of different frames so that when you're designing these, we don't have to worry
about adding a small border in, because this here is only where all these items are going to be displayed.
So how this is gonna work is we're going to have on the left a picture of an item, the name of it,
and some stats for the item.
And then the items are all going to be displayed on the right hand side here.
So in items we're going to add in another two frames.
One of them is going to be called frame and one of them is going to be called info.
Info is going to kind of contain the information about the item.
So the name, the picture, that kind of stuff.
And then the frame is going to contain the actual items themselves.
So the let's do bit info.
Let's set that up first.
So um I'm thinking let's see.
So we scale on the y would just be one.
That's fine.
And then along the x um 0.3 kind of looked at last time.
Looks quite good to keep it as that.
So set that as one.
So that's the thing at 0.3.
So the first frame here we want to really start about 0.35 to give.
So the start of 0.35.
Let's give it a bit of a gap really, between the two, when that's what makes it look best, really.
And then the sizing of it itself.
Um.
Seven would just see.
665.
Yeah, that would be good.
And then one along the Y.
So you see how that's quicker because you don't need to worry about making a border because we've already
got one pretty much.
Um, here was one okay.
So the frame itself now um, some people or some tutorials might say, well, let's add in a, um,
a frame for each of the items we've got in our, um, for each of the items we want to sell.
Now, this is a very good idea because it's quite bad practice.
If you're wanting to remove an item or add an item in, you then have to go into this and adjust it
all.
So it can be quite annoying actually.
So instead we're going to do it via a script.
So as long as we create one template for us to use, we're basically then going to duplicate it, change
some of the values via a script so that we don't actually have to change anything to do the GUI once
it's up and running.
Okay.
So and we're going to do one of the ways we're going to do this is by using a constraint called the
UI grid layout.
And it discussed this, but it basically lays out like a grid.
So you can have.
How many frames.
So let's add in some frames just to show you here is going to grid them out like this.
Here.
Now I want four along the x.
We just adjust the sizing and the padding of these.
So the cell size is probably going to be about.
240 and the Y 0.240 again.
Um, um.
We can adjust this a little bit.
Maybe about three two might look better.
Um, and then the cellpadding is the bit in between the middle.
So let's decrease this slightly.
And now we're fitting in for perfect.
So let's just see.
Um.
And you.
Are we looking at one there?
Okay.
And then here.
Any more.
And that should be fine actually, as it is.
So yeah, you can just see it all laid out quite nicely like that.
So the maximum we can fit here is, well, four times eight.
Um, so 12 here actually, um, we could use a scrolling frame, um, to add more items in, but I'm
not going to do that, as I know I'm not going to have any more than 12.
But if that is something you want to do, um, you'd want to repeat this process.
But by using a scrolling frame for here instead of just a standard frame like this here, all we need
to do is take one of these and create a template.
So we're not going to be using a frame.
We're going to be using a text button because we're wanting to be able to click these.
We want them to be clickable.
And this is call this template like this here.
So the button itself is not going to have any text.
So I'm going to just get rid of a text here.
Instead we're going to add a corner inside of here.
Um at 20 I believe we chose no 15.
So it looks so it matches the rest of them like that there.
And I'm also going to add in a viewport frame, which is um, something that we're going to have a look
at a bit later on today.
And they're pretty cool really.
Um, so point five, 0.5 now, the reason why we're adding a viewport frame inside of this template,
this text button is because if we just put the viewport frame in itself, we won't be able to click
it.
There will be no clickable events really, or be more difficult to tell when they clicked it.
And then the size, probably about 0.9.
I think we'd look good there.
Okay.
Perfect.
So these templates here as they get duplicated is kind of what it would look like really.
So quite nice.
And I'm going to move this over into the shop system script.
So we accessible there as we don't want to we don't want a template where over here.
Because otherwise there will be a blank one when you're opening up a shop and you don't want that.
Okay.
Let's have a look at the info.
So the info is going to have at the top is going to have a little title.
So let's add in a text label and call this name label.
By Constance Mounsey of one text scaled.
Font.
I believe we're using Sudoku.
One of a white Sudoku.
One font.
Again, keep it.
Keep it the same.
Keep it what it is, it will look much better.
Um, is that the same one that we were using?
It looks a bit different to me.
Fukuoka one as a caterpillar.
It was bold.
Okay.
That's why.
Okay.
It's not bold today, but for all caps.
Okay, a bit confused then.
Um, let's scale this down a bit then.
So the positioning is fine.
The size is going to be one comma, zero comma, 0.150, something like that there.
Um, and then of course something like um.
Item name.
Something like that.
There.
Okay.
Um, below we're going to add in a viewport frame.
This will be displaying the item here as well.
So this viewport frame I'm not going to make it take up the entire width.
We want this to be a bit smaller.
Um so size 6020.
And.
Something like that.
Position at 0.5.
Move it down a bit along the Y.
Mhm.
It's good.
I think it's just taking up a bit of a bit too much space.
Almost.
Um, you can see it's taking up quite a large amount of space.
Let's make the name label a bit smaller.
Then let's set this to be, um, like, I don't know, 0.2 and then set this to be.
Um, position.
1.2.
1.3.
Something of that background despondency will be one, so you won't be able to see that.
Um, but yeah.
Okay, cool.
And then underneath here we're going to add in a couple values.
We're going to add in the the speed that this item gives, the cooldown the item has and the cost of
the item.
So let's move all these down.
So position here along the Y 0.50.55.
Make these a bit smaller as well.
Um.
Perhaps just a one.
I'm going to set the alignment to be on the left so that it's starting from there basically.
Okay.
So this will be I'm going to put first the speed label.
And this will be giving the speed.
Duplicate this and move it down.
Um.
556564.
Perhaps six three.
Six.
Three's a bit too much.
Six for men.
Just on a squash visit in as much as possible.
Really?
Um, speed.
Then we're going to have the cooldown.
So cool down.
And then a bit lower down again we're going to add in the cost.
So I guess we'll go down to.
Seven three.
Okay, we definitely got enough room now.
That's good.
Okay.
And then just underneath these we're going to add in a purchase button.
So if the player is able to purchase the button lots of.
I know there's quite a lot of stuff going on here.
Um, but hopefully make a bit more sense once we've start coding it so you can see what actually we're
changing and things like that.
So also adding in a text button this is called purchase button.
And we're adding in here a corner of 15.
And inside here we're going to also add a text label giving us the text for this.
Turkey one tech scaled so you can see how you might want that to be a bit smaller.
Really mean once we put it, once you make it smaller and put it into place, we might think otherwise,
but um, yeah.
And then the it's actually itself.
We don't want any text for that.
Okay.
Position it a bit further down.
Eight five.
Yep, that looks quite nice like that.
And maybe make this, like a bit of a ball.
I'm gonna use this color that's listed on the stats over here.
Again, keeping the keeping the colors the same.
Always a good idea to do.
The frame itself is here.
Copy that color.
And put it into the purchase button as well there.
Uh, yeah.
Pretty much perfect.
Might change the text color to white.
Or is that going to be a bit too similar to the.
Yeah, probably leave it as black then.
Um, okay.
There we go.
So Swap Shop is kind of going to kind of going to look like quite a lot of code and stuff involved there.
Um, and now we're going to take a break from the code for a minute now and take a look at the, um,
items and stuff that we're going to want into our game.
So let me just quickly I'll disable this for now so it's not in our way, and I'll disable this as well.
I'm not going to be coding that just yet.
Okay.
So, um, I'm going to find some items that I'm going to use to put into, um.
Well, yeah.
Into our shop basically.
Now, I could I could make these ask myself however, um, for like items, like drinks and stuff like
that.
They're quite difficult to make in Roblox studio.
So unless you have experience in another software like blender, which we will be looking at in the
next section, um, you don't really know how to make them because they're quite advanced.
So I'm going to find some from a toolbox and add them in so you can add in whatever ones you'd like.
Um, I don't necessarily encourage you to use the exact same ones as I am, but if you do different
ones, um, just be careful that, um, when you're coding it later on, that you're naming the things
what you want to name and not what I've named them.
Okay.
So I will skip to the part where I have got all my items laid out here.
Okay, so here we go.
I've decided on all of my items here, so I've got some basic ones starting off like a lollipop and,
um, an apple.
Bring it onto, um, some protein bars, a protein shake, some drinks when it gets a bit weird with
some potions and, um, gas canister and some nuclear waste.
I thought there was some quite cool additions to make in there.
Okay, so I've got all mine displayed out here.
I've put all of these into a folder called items.
Now, um, all of these here have to be set up in a specific way.
So, um, if you are well, I'll encourage you to do this yourself.
Really, to make your own twist onto the game.
Don't use the exact ones that I'm doing.
But, um, these set up in a certain way.
So they all need to be in into a folder called items.
Um, and these all need to go inside here as tools.
Now, um, inside each of the tools, um, you will need, um, just a handle.
Okay.
We're going to work on the auto weld and the speed giver scripts.
Just in a minute.
But, um, a handle you will need here.
Okay.
Um.
For each of these, you'll make sure you need.
You need a handle.
And inside this handle.
Yeah.
Inside this inside.
You can also write other any other stuff as well.
So any parts and stuff that are involved you can put there as well.
As long as you have one part or any kind of item here called handle, that's all you need really for
those.
Also make sure that the um, tool itself has a primary part of that handle, okay.
And requires handle is ticked like that there, um, there the adjustments that you need to make for
these.
Now, I'm then going to put items inside of replicated storage.
Okay.
As we don't want these visible in our map.
We want them accessible in replicated storage there.
Okay, cool.
Um, so next up then we are going to, um, write up all of the stats for this for these items.
Okay.
So um, I'm going to go into storage again and add in a module script.
And this is going to be called Shop items.
Like this here.
So there's a couple of different ways because obviously we have things like the cost of it, the cooldown,
the speed that it gives.
So there's lots of different stats and stuff to save of each item.
Now there's a couple of different ways you could save these.
This you can add a folder in each of your items and put in some values there with text and stuff.
But it's a bit long winded.
And also you've covered module scripts.
I want to show you them in a practical example.
Really.
Which is why I've decided to use use model scripts here.
Okay.
So we are going to create one big table full of each item we have and it starts and things like that
really.
So I'm going to keep calling this module.
Um, but we're going to create a list of all of our items.
Now we're going to number these.
So we're going to start off with number one.
So we use um square brackets for any numbers or screen strings writing here.
And number one is going to be equal to a table of items.
As our first item.
We want to give it a couple of bits of information.
We want to give it its name where its tool is located, and all this kind of stuff here.
So you'll want to first write down its tool.
This will be in replicated storage.
So game getservice replicate storage dot items.
Oh sorry.
Outside of here dot items.
And then I'm going to use square brackets here.
And my first one is a lollipop.
The reason why I'm using square brackets is I'm going to end up copying and pasting this for a bunch
of my other ones, and some of them have spaces, some of them don't.
So I've decided to use these for all of them, basically.
Um, we will also.
Now the tool also has a name here, so we don't need the name of it.
Um, let's see what else we have.
We'll also need the cost of it.
Just as any kind of number.
Make sure sorry.
Make sure when you've written this, you write a comma afterwards as this is like a table really, it's
a table of values.
Each value needs a comma afterwards.
So the cost you will need um, the um not not cost isn't first the speed is first written down, then
it's to cool down.
As any number you'd like.
And then the speed.
So not speed over cost.
How much it costs.
And that's everything then for that.
So the tool to reference it through here, the speed written as this for cooldown as this and the cost
as that.
Now obviously don't set them to be this here.
You obviously want to change these.
Once you're done with this write a comma after x.
Remember this is a table of tables almost.
And then we're going to kind of repeat this.
Then for our second item and so on.
Now it's going to be a bit boring.
I'm just going to be writing down the same stuff really, but changing some of the values.
So I'm going to skip to the part once I've done this.
Okay.
If you just copy this code and set your own speed and cooldown and cost values, but you'll be able
to see how this looks like once I've done it in a minute, so I'll skip forward to then.
Okay, so I've just finished writing out all of the items here.
Okay, so I've decided to make these this inside another table just called items in case you wanted
to add anything else later on.
Um, but just like this really.
So I've also chose to write out the name, um, not necessarily.
Just think speeds things up a little bit, really.
Um, and if you wanted to give it a different name based on the tool as well, you could do that as
well.
So you've got the tool, the name, speed, cooldown and cost and all of the ones written there.
Now it's a bit difficult to like balance all of these, I guess.
I mean, I've decided to make the more expensive one, um, 10,000 here, but it's very difficult to
imagine the cost of all these, so it might take a bit of going back and forward.
Um, but as you play and test the game, you'll be able to see if a speed or cooldown is fair or not.
Basically.
Okay.
How these work is the speed value is going to be the amount of speed the player gets from clicking the
item when it's held in the player's hands each time, and the cooldown is how long we have to wait between
each click, and the cost is how much speed it will cost them in order to purchase this item.
So I've got 13 here.
Um, but of course you can add in as many as you like.
Okay.
Now, the only other bit we've got to today before we've finished, like, um, the prep before we do
the shop is the auto weld script.
So inside each of these, um, the issue is if I currently put this in the workspace and run the game,
this will happen.
Hopefully.
I'll take a while, but to see how they all break up into pieces there.
That's a big issue.
We don't want them to be able to be carrying around something like this in their hands.
Okay.
This is because they are not welded together now.
Tools have to be welded together because it has to be unanchored to for the player to move around with
them.
So it has to be they have to be act as one basically.
Now we could go through, add a weld constraint, each one of these um, and do it manually, but it's
just a long setup to do and it's, it's probably already taken you a while to set this up already.
So instead let's make a script to do this for us.
So inside each of these I'm going to add in a script.
I'm going to call this auto weld.
This is going to automatically weld all the parts together.
By welding I mean by using weld constraints.
So let's reference the tool.
So local tool is equal to script dot parent like that there.
So now referenced that tool there.
Okay.
So.
Or are we really going to we're really going to want to be getting the handle, aren't we?
Because oh no, because they're listed like that.
Okay, cool.
So we've got the tool here.
We're then going to use a for loop to reference all of the children in this tool.
So for I comma v in pairs model so not model.
So a reference that this tool here colon get children like that there.
Now we need to invite some bizarre code here to check to see if, um.
The part is actually a part, because in case we add any other scripts or things like that, we just
want to make sure that this is only working for parts.
So we want to write here.
If the colon is a this checks its class.
So is a part.
Or the colon is a mesh part, um, or the colon is a union operation.
These are the three types of part that you can have in your game.
Really.
Okay.
Um, and we also want to check to make sure that the name is not handle because if the name is handle,
um, we don't want to weld it to itself basically.
So and v dot name is not equal to handle now because we've got multiple Ands and ORS.
It might confuse this being occurring or this being occurring or both of these occurring at the same
time.
So just to make sure it doesn't happen we're going to brackets around this.
Which basically means that um, one of these have to be met and this one has to be met.
Perfect.
And from that we just add a well constraint in using instance dot new.
Not too difficult.
So local weld constraints.
Is equal to instance dot new.
Well constraint.
Well, constraints into three, well, constraints.
Dot part zero is equal to v and then so is equal to v.
So it's auto completing two vector three okay.
And then well constraint dot part one is going to be equal to the handle.
So tool dot handle.
Cool.
So I can then take this script which I put into wherever.
Apple.
Yeah.
Copy this and select all these and paste into.
And we've now got a autoworld script into all of our objects here.
And then we'll quickly go ahead then and run the game.
You'll hopefully be able to see, in fact, that they all stayed together quite nicely.
Um.
Just like this here in a minute, but loads.
There we go.
So some of them will fall.
But the point is, they're intact as one.
That's what we're wanting to do here.
Okay, cool.
So not the most exciting, I don't think.
But we now have the set up done for the shop.
Okay.
So we have a list of all the stats.
Each item has we've got all the items displayed.
Remember.
Remember to put bits back over to replicate storage once you're done.
And I've done over.
So we're all ready now to code the shop now.
The shop is going to be probably one of the more longer scripts that you've done.
It's definitely going to be a challenge, but, um, make sure to talk through it and explain what I'm
doing.